<template>
  <el-menu
      @select="selectType"
      :default-active="activeIndex"
      :background-color="menuStyles.backgroundColor"
      :text-color="menuStyles.textColor"
      :active-text-color="menuStyles.activeTextColor"
  >
    <el-menu-item
        v-for="(type, index) in typeList"
        :key="type.value"
        :index="index.toString()"
    >
      {{ type.label }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "0",
      menuStyles: {
        backgroundColor: "#e6f7ff",
        textColor: "#333",
        activeTextColor: "#1d39c4",
      },
      // 类型映射表
      typeList: [
        {label: '电表', value: 'Ammeter', route: '/AmmeterPage'},
        {label: '水表', value: 'WaterMeter', route: '/WaterMeter'},
        {label: '压力表', value: 'PressureMeter', route: '/PressureMeter'},
        {label: '温度表', value: 'TemperatureMeter', route: '/TemperatureMeter'},
        {label: '三叉表', value: 'TrifurcateMeter', route: '/TrifurcateMeter'},
        {label: '指示器', value: 'IndicatorMeter', route: '/IndicatorMeter'}
      ]
    };
  },
  created() {
    // 在组件创建时根据当前路由设置激活项
    this.setActiveIndexByRoute();
  },
  watch: {
    // 监听路由变化
    '$route': {
      handler: 'setActiveIndexByRoute',
      immediate: true
    }
  },
  methods: {
    setActiveIndexByRoute() {
      const currentRoute = this.$route.path;
      const index = this.typeList.findIndex(item => item.route === currentRoute);
      if (index !== -1) {
        this.activeIndex = index.toString();
      }
    },
    selectType(index) {
      this.activeIndex = index;
      const selectedType = this.typeList[index];
      if (selectedType.route) {
        this.$router.push(selectedType.route);
      }
      this.$emit("selectType", selectedType.value);
    },
  },
};
</script>

<style scoped>
.logo-container {
  padding: 20px;
  text-align: center;
  color: #1d39c4;
  border-bottom: 1px solid #e8e8e8;
}

.logo-container h2 {
  margin: 0;
  font-size: 1.2em;
}

.sidebar {
  height: 100vh;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #d9d9d9;
  background-color: #001529; /* 深色背景 */
}

.el-menu {
  border-right: none;
  overflow-x: hidden; /* 隐藏横向滚动条 */
}

.el-menu-item {
  transition: all 0.3s ease;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap; /* 防止文字换行 */
  padding-right: 20px !important; /* 确保右侧有足够空间 */
  width: 100%; /* 确保宽度填充 */
  box-sizing: border-box; /* 包含padding在内的盒模型 */
}

.el-menu-item:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
  transform: translateX(5px);
}

.el-menu-item.is-active {
  background-color: var(--primary-color) !important;
  color: white !important;
  font-weight: 600;
}

/* 如果有子菜单，也需要处理 */
.el-sub-menu {
  width: 100%;
}

.el-sub-menu :deep(.el-sub-menu__title) {
  padding-right: 20px !important;
}

/* 处理菜单展开时的样式 */
.el-menu--collapse {
  width: 64px; /* 折叠时的宽度 */
}

/* 确保整个侧边栏容器不会出现滚动条 */
.sidebar-container {
  height: 100%;
  overflow: hidden;
}

/* 如果需要垂直滚动但不需要水平滚动 */
.el-menu--vertical {
  overflow-y: auto;
  overflow-x: hidden;
}

</style>
